<template>
	<view class="content">
		<view class="header">
			<view class="header-title">
					<p>本次购买的课程仅属于各自对应的学期或有效期，请认真查看学期或课程有效期间范围，合理安排学习时间</p>
				</view>
			<view class="header-content">
				<view class="title">
					<span>机构</span>
					<span>简七理财</span><br>
				</view><br>
				<image src="../../static/img/jq.jpg" mode=""></image>
				<view class="mesg">
					<ul>
						<li class="mesg-first">跟简七学理财</li>
						<li>永久有效</li>
						<li>{{ price | finalPrice }}</li>
					</ul>
				</view><br>
				<p>小计:{{ price | finalPrice }}</p>
			</view>
			<view class="header-price"><p>小计:{{ price | finalPrice }}</p></view>
			<view class="header-botton">
				<view class="sumprice">
					<p>总计:{{ price+sum | finalPrice }}</p>
				</view><br>
				<view class="paymoney">
					<p>实付金额:<span style="color:rgba(234, 82, 53, 1);">{{ price+sum | finalPrice }}</span></p>
					<button :clickable="true" @click="pageTo('/pages/order/kecheng')" >提交订单</button>
				</view>
				
			</view>
		</view>
	</view>	
</template>

<script>
	
	export default {
		comments:{
		},
		data() {
			return {
				price:398.00,
				sum :0
			}
		},
		filters:{
			finalPrice(value){
				return "￥"+value.toFixed(2)
			}
		},
		methods: {
			pageTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F2F2F2;
		color: rgba(56, 56, 56, 1);
	}
	.header-title{
			width: 100%;
			margin-top:2% ;
			height: 59px;
			line-height:150%;
			background-color: rgba(255, 255, 255, 1);
			font-size: 12px;
			text-align:left;
	}
	.header-title p{
		padding-top: 3%;
	}
	.header-content{
			width: 100%;
			height: 197px;
			left: 1px;
			margin-top: 4%;
			background-color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 150%;
			text-align: center;
	}
	.title span{
			
			float: left;
			margin-top:5%;
			margin-left: 2%;
			font-size: 13px;
			line-height: 150%;
	}
	image{
		width: 176px;
		height: 89px;
		float: left;
		margin-left: 2%;
	}
	.mesg ul{
		float: left;
		margin-top: -25%;
		margin-left:41%;
		list-style-type: none;
		font-size: 13px;
	}
	li{
		text-align: left;
	}
	.mesg-first{
			margin-bottom: 27%;
	}
	.header-content p{
			height: 24px;
			font-size: 13px;
			line-height: 150%;
			text-align: right;
			margin-right: 3%;
			margin-top: 25%;
	}
	.header-price{
		width: 100%;
		height: 56px;
		background-color: rgba(250, 251, 253, 1);
		font-size: 16px;
		line-height: 56px;
		border: rgba(236, 238, 241, 1) solid 1px;
		text-align: right;
	}
	.header-price p{
		margin-right: 3%;
	}
	.header-botton{
			width: 100%;
			height: 257px;
			margin-top: 5%;
			background-color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 150%;
			border: rgba(236, 238, 241, 1) solid 1px;
			text-align: center;
	}
	.sumprice{
		width: 100%;
		height: 56px;
		font-size: 16px;
		line-height: 56px;
		border: rgba(236, 238, 241, 1) solid 1px;
		text-align: right;
	}
	.sumprice p{
		margin-right: 3%;
	}
	.paymoney{
			height: 43px;
			background-color: rgba(250, 251, 253, 1);
			font-size: 16px;
			line-height: 43px;
			text-align:left;
			margin-top:35%;
			padding-left: 2%;
	}
	.paymoney button{
			width: 108px;
			height: 43px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(234, 82, 53, 1);
			font-size: 16px;
			line-height:43px;
			float: right;
			text-align: center;
			margin-top: -11%;
	}
</style>
